import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import TableControls from '#cpt/temp/TableControls'
import AddEditModal from '#cpt/temp/AddEditModal'
import Delete from '#cpt/temp/Delete'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== $Lazy
const Page 		= $Lazy.load(()=>import('#tp/page/page-container'))
const $cache 	= $Lazy.file(()=>import('#private/cache-api'))
// 
const classifyStatus = [{ name:'启用', value:'0' },{ name:'禁用', value:'-1' }]
const isDel = [{ name:'否', value:'0' },{ name:'是', value:'1' }]
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		selectedRows:[],
		// 搜索表单列表
		forms : [
			{ label: '分类名称',		name: 'cate_name'},
			{ label: '路径',		name: 'pid',	type:'treeSelect',	checkable:false,	multiple:false,	data:[],	loading:true },
			
		],
		// 提交表单列表
		formData : [
			{ label: '分类名称',		name: 'cate_name', 		full:true,					required:true},
			{ label: '上级分类',		name: 'pid', 			half:true,	type:'treeSelect',	data:[],	checkable:false,	multiple:false,	loading:true },
			{ label: '公司',		name: 'comp_id', 		half:true,	type: 'select',		loading:true,	idStr:'uuid',	nameStr:'company_name' },
			{ label: '层级',		name: 'level', 			half:true, 	 },
			{ label: '排序',		name: 'sort', 			half:true, 	 },
			{ label: '系统编码',		name: 'code', 			half:true 	 },
			{ label: '是否可删除',	name: 'is_enabled_del', half:true,	type: 'radio',	value:'0',	data: [{ name:'否', value:'1' },{ name:'是', value:'0' }] 	 },
		]
	}
	
	componentDidMount(){
		this.getSelect()
		
		this.fetch()
	}
	
	// 获取下拉数据
	getSelect = () => {
		const { forms, formData } = this.state
	
		$cache.then( async f => {
			// 路径
			const _data = await f.getCache({ api:'conf-system-category/select',refresh:true })
			$fn.setRow( forms, 'pid', _data )
			$fn.setRow( formData, 'pid', _data )
			this.setState({ forms, formData })
		})
	}
	
	// 弹窗获取下拉数据
	getModalSelect = async () => {
		const { formData } = this.state
		$cache.then( async f => {
			// 公司
			await $fn.setRow( formData, 'comp_id', await f.getCache({ api:'company' }) )
			
			this.setState({ formData })
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'conf-system-category/index')
	
	// 表单
	cols = [
		{ title: '分类名称', 		dataIndex: 'label', 			width:300 },
		{ title: '父级id', 			dataIndex: 'pid', 				width:80 },
		{ title: '分类路径', 		dataIndex: 'path', 				width:180 },
		{ title: '状态', 			dataIndex: 'status',  			...$fn.table.status,	render: text => $fn.getState(classifyStatus,text)},
		{ title: '排序', 			dataIndex: 'sort', 				width:80 },
		{ title: '层级', 			dataIndex: 'level', 			width:80 },
		{ title: '公司', 			dataIndex: 'company_name', 		width:150 },
		{ title: '系统编码', 		dataIndex: 'code', 				width:80 },
		{ title: '是否是系统分类', 	dataIndex: 'is_enabled_del',	width:100,				render: text => $fn.getState(isDel,text) },
		{ title: '创建时间', 		dataIndex: 'created_at', 		...$fn.table.time },
		{ title: '更新时间', 		dataIndex: 'updated_at', 		...$fn.table.time },
		TableControls.controls.call(this,{ width: 120, align:'left' })
	]
	
	// 表格操作按钮
	table_controls = (text,{value, is_enabled_del, code}) => {
		return [
			TableControls.edit.call(this, 'conf-system-category/info', { uuid:value },{   						// 编辑
				select: this.getModalSelect,
				load: ({ code:infoCode })=> {
					if(+code === 0){
						if(infoCode === ''){
							setTimeout(()=>{this.formRef.setValue({ 'code': '0' })})
						}
					}
				}
			}),
			+is_enabled_del === 0 ? this.onDel([ value ]) : null,														// 删除
			
		]
	}
	
	// 操作按钮
	controls = () => {
		return [
			Controls.add.call(this, {click: ()=> {
				this.getModalSelect()
				this.formRef.setValue({'is_enabled_del': '0'})
			} } ),					// 新增
			this.onDel(),		// 删除
		]
	}
	// 删除
	onDel = uuid => Delete.call(this, 'conf-system-category/del', { uuid, isKeys: !uuid, idStr: 'uuids',
		onComplete:()=> {
			$fn.dataRemove('conf-system-category/select')
			this.getSelect()
		}
	})
	
	render(){
		return (
			<>
				<Page title='系统分类' controls={this.controls()}>
					{/* 搜索 */}
					{ SearchForm.call(this) }
					{/* 表格 */}
					{ Table.call(this,{ idStr: 'value', hasCurrent: false } ) }
				</Page>
				{/* 添加 编辑 */}
				{AddEditModal.call(this,{title:'系统分类', labelWidth:'s6', width:800, 
					api:'conf-system-category/add', 
					editApi:'conf-system-category/edit',
					onComplete:()=> {
						$fn.dataRemove('conf-system-category/select')
						this.getSelect()
					} 
				})}
			</>
		)
	}
}

export default Index